<div class="snode-content">
  <div
    [ngClass]="
      this.dataSourcs?.Data?.IsDisplay && this.dataSourcs.NodeType === NodeCondition
        ? 'node-condition mat-elevation-z2'
        : 'hide'
    "
    *ngIf="this.dataSourcs?.NodeType === NodeCondition"
    cdkDropList
    (mouseenter)="ChangeIsMarkDisplayShow()"
    (cdkDropListDropped)="ReleaseDrop($event)"
    (contextmenu)="OnRightClick($event)"
    [matMenuTriggerFor]="conMenu"
  >
    <div class="node-cdk point-type" (cdkDragStarted)="StarDrop()" cdkDrag>
      {{ GetDisplayText(this.dataSourcs?.Data?.Conditions?.Field) }}
      {{ dataSourcs?.Data?.Conditions?.Operate }}
      <div class="node-cdk-condition">{{ GetDisplayText(this.dataSourcs?.Data?.Conditions?.Value) }}</div>

      <div class="dray-style" *cdkDragPreview>
        {{ GetDisplayText(this.dataSourcs?.Data?.Conditions?.Field) }}
        {{ dataSourcs?.Data?.Conditions?.Operate }}
        {{ GetDisplayText(this.dataSourcs?.Data?.Conditions?.Value) }}
      </div>
    </div>
    <!-- <button (click)="show()">123</button> -->
  </div>
  <div
    [ngClass]="
      this.dataSourcs?.Data?.IsDisplay && this.dataSourcs.NodeType === NodePlain
        ? 'node-condition mat-elevation-z2'
        : 'hide'
    "
    *ngIf="this.dataSourcs?.NodeType === NodePlain"
    cdkDropList
    (mouseenter)="ChangeIsMarkDisplayShow()"
    (cdkDropListDropped)="ReleaseDrop($event)"
    (contextmenu)="OnRightClick($event)"
    [matMenuTriggerFor]="conMenu"
  >
    <div class="node-cdk" (cdkDragStarted)="StarDrop()" cdkDrag>
      <div class="node-cdk-condition point-type">{{ dataSourcs?.Data?.Conditions.PlainText }}</div>
      <div *cdkDragPreview>{{ dataSourcs?.Data?.Conditions.PlainText }}</div>
    </div>
  </div>
  <div
    [ngClass]="
      this.dataSourcs?.Data?.IsDisplay && (this.dataSourcs?.NodeType == NodeAnd || this.dataSourcs?.NodeType == NodeOr)
        ? 'node-connect mat-elevation-z2 point-type'
        : 'hide'
    "
    *ngIf="this.dataSourcs?.NodeType === NodeAnd || this.dataSourcs?.NodeType === NodeOr"
    (contextmenu)="OnRightClick($event)"
    [matMenuTriggerFor]="contextMenu"
  >
    {{ dataSourcs?.NodeType == NodeAnd ? '和' : '或' }}
  </div>
  <svg class="svg" *ngIf="this.dataSourcs?.Children?.length > 0" [ngStyle]="{ height: this.GetSvgHeight() + 'px' }">
    <g svgline [dataSourcs]="this.dataSourcs"></g>
  </svg>
  <mask
    [ngClass]="GetMarkShowMes() ? 'mask' : 'hide'"
    *ngIf="
      (this.dataSourcs?.NodeType === NodePlain || this.dataSourcs?.NodeType === NodeCondition) &&
      this.dataSourcs.Data.IsMarkDisplay
    "
    [dataSourcs]="this.dataSourcs"
    (mouseleave)="ChangeIsMarkDisplayHide()"
  ></mask>
  <div class="children-content">
    <node *ngFor="let da of this.dataSourcs?.Children" [dataSourcs]="da"></node>
  </div>
</div>

<mat-menu #contextMenu="matMenu">
  <ng-template matMenuContent>
    <button mat-menu-item (click)="ChangeType()"><mat-icon svgIcon=""></mat-icon>转化为 和/或</button>
    <button mat-menu-item (click)="SelectSNode()"><mat-icon svgIcon=""></mat-icon>激活/取消激活</button>
    <button mat-menu-item (click)="AddOneChildNode()"><mat-icon svgIcon=""></mat-icon>新增</button>
    <button mat-menu-item (click)="CopyClick()"><mat-icon svgIcon="file_copy"></mat-icon>复制</button>
    <button mat-menu-item (click)="PasterClick()"><mat-icon svgIcon="content_paste"></mat-icon>粘贴</button>
    <button mat-menu-item (click)="CutClick()"><mat-icon svgIcon="content_cut"></mat-icon>剪贴</button>
    <button mat-menu-item (click)="DeleteNode()"><mat-icon svgIcon="delete"></mat-icon>删除该节点</button>
  </ng-template>
</mat-menu>

<mat-menu #conMenu="matMenu">
  <ng-template matMenuContent>
    <button mat-menu-item (click)="CopyClick()"><mat-icon svgIcon="file_copy"></mat-icon>复制</button>
    <button mat-menu-item (click)="CutClick()"><mat-icon svgIcon="content_cut"></mat-icon>剪贴</button>
    <button mat-menu-item (click)="DeleteNode()"><mat-icon svgIcon="delete"></mat-icon>删除该节点</button>
    <button mat-menu-item (click)="OpenDialog()"><mat-icon svgIcon="edit"></mat-icon>修改</button>
  </ng-template>
</mat-menu>
